<template>
  <el-card class="menu">
    <template #header>
      <div class="clearfix">
        <el-button
          type="primary"
          @click="toCreate"
        >
          添加菜单
        </el-button>
      </div>
    </template>
    <el-table
      :data="menus"
      style="width: 100%"
    >
      <el-table-column
        label="编号"
        min-width="150"
        type="index"
      />
      <el-table-column
        prop="name"
        label="菜单名称"
        min-width="150"
      />
      <el-table-column
        prop="level"
        label="菜单级数"
        min-width="150"
      />
      <el-table-column
        prop="icon"
        label="前端图标"
        min-width="150"
      />
      <el-table-column
        prop="orderNum"
        label="排序"
        min-width="150"
      />
      <el-table-column
        label="操作"
        min-width="150"
      >
        <template #default="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts">
import { useRouter } from 'vue-router'
import { defineComponent, onBeforeMount, ref } from 'vue'
import { getMenusAll, deleteMenu } from '/@/services/menu'
import { ElMessage, ElMessageBox } from 'element-plus'
interface Menu {
  createdBy: string
  createdTime: Date
  description: string
  href: string
  icon: string
  id: number
  level: number
  name: string
  orderNum: number
  parentId: number
  shown: true
  updatedBy: string
  updatedTime: Date
}
// 操作
const useMenuHandle = (loadDataFn: ()=>void) => {
  const router = useRouter()
  const toCreate = () => {
    router.push('/menu/create')
  }
  const handleEdit = ({ id }: Menu) => {
    router.push(`/menu/edit/${id}`)
  }
  const handleDelete = ({ id, name }: Menu) => {
    ElMessageBox.confirm(`是否删除菜单-${name}`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
      .then(async () => {
        const { data } = await deleteMenu(id)
        if (data.code === '000000') {
          ElMessage.success('删除成功')
          loadDataFn()
        }
      })
      .catch(() => {
        console.log('取消')
      })
  }
  return {
    toCreate,
    handleEdit,
    handleDelete
  }
}
const menus = ref<Menu[]>([])
const useMenus = () => {
  const getMenusAndRender = async () => {
    const { data } = await getMenusAll()
    if (data.code === '000000') {
      menus.value = data.data
    }
  }
  onBeforeMount(async () => {
    getMenusAndRender()
  })
  return {
    menus,
    getMenusAndRender
  }
}
export default defineComponent({
  name: 'MenuIndex',
  setup () {
    const { menus, getMenusAndRender } = useMenus()
    return {
      menus,
      ...useMenuHandle(getMenusAndRender)
    }
  }
})
</script>

<style lang="scss" scoped></style>
